<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桂林电子科技大学计算机与信息学院</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 可选：引入字体图标库，如Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHq6QjBnOZcLyqvG5jDkZ6ljyY1q5Fgk2uqzO6k6E/RtEJwZZI1YgMsjcXBZSB0CjybU+8cw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="logo">
            <img src="images/logo.png" alt="计算机与信息学院Logo">
        </div>
        <nav>
            <ul>
                <li><a href="#">主页</a></li>
                <li><a href="#">学院概况</a></li>
                <li><a href="#">师资队伍</a></li>
                <li><a href="#">科研成果</a></li>
                <li><a href="#">新闻动态</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <!-- 主横幅 -->
    <section class="banner">
        <div class="carousel">
            <div class="slide" style="background-image: url('images/banner1.jpg');">
                <div class="slide-content">
                    <h1>欢迎来到计算机与信息学院</h1>
                    <p>创新驱动，科技引领未来</p>
                </div>
            </div>
            <div class="slide" style="background-image: url('images/banner2.jpg');">
                <div class="slide-content">
                    <h1>卓越教育，培养精英</h1>
                    <p>我们致力于提供最优质的教育资源</p>
                </div>
            </div>
            <div class="slide" style="background-image: url('images/banner3.jpg');">
                <div class="slide-content">
                    <h1>前沿科研，引领潮流</h1>
                    <p>不断探索，推动科技进步</p>
                </div>
            </div>
        </div>
        <!-- 轮播导航箭头 -->
        <button class="carousel-control prev"><i class="fas fa-chevron-left"></i></button>
        <button class="carousel-control next"><i class="fas fa-chevron-right"></i></button>
    </section>

    <!-- 主要内容区 -->
    <main>
        <!-- 左侧边栏 -->
        <aside class="sidebar left">
            <section class="quick-links">
                <h2>快速链接</h2>
                <ul>
                    <li><a href="#">学院通知</a></li>
                    <li><a href="#">重要公告</a></li>
                    <li><a href="#">友情链接</a></li>
                </ul>
            </section>
            <section class="latest-news">
                <h2>最新动态</h2>
                <p>2024-04-01: 举办年度编程大赛，吸引了众多学生参与...</p>
                <p>2024-03-15: 新教授加入学院，带来丰富的研究经验...</p>
            </section>
            <section class="contact-info">
                <h2>联系信息</h2>
                <p>电话：123-456-7890</p>
                <p>邮箱：info@guet.edu.cn</p>
                <p>地址：桂林电子科技大学计算机与信息学院</p>
            </section>
        </aside>

        <!-- 主内容 -->
        <section class="content">
            <article class="news-module">
                <h2>新闻模块</h2>
                <article>
                    <h3>新闻标题1</h3>
                    <time datetime="2024-01-01">2024-01-01</time>
                    <p>简短描述...</p>
                </article>
                <article>
                    <h3>新闻标题2</h3>
                    <time datetime="2024-01-02">2024-01-02</time>
                    <p>简短描述...</p>
                </article>
                <!-- 更多新闻 -->
            </article>

            <article class="events">
                <h2>活动预告</h2>
                <ul>
                    <li>2024-02-15: 编程大赛</li>
                    <li>2024-03-10: 学术讲座</li>
                    <!-- 更多活动 -->
                </ul>
            </article>

            <article class="research">
                <h2>研究成果</h2>
                <ul>
                    <li>《深度学习在图像识别中的应用》</li>
                    <li>《区块链技术的发展趋势分析》</li>
                    <!-- 更多研究成果 -->
                </ul>
            </article>
        </section>

        <!-- 右侧边栏 -->
        <aside class="sidebar right">
            <section class="faculty">
                <h2>教师简介</h2>
                <div class="faculty-member">
                    <img src="images/faculty1.jpg" alt="教师1">
                    <p><a href="#">张教授</a></p>
                </div>
                <div class="faculty-member">
                    <img src="images/faculty2.jpg" alt="教师2">
                    <p><a href="#">李教授</a></p>
                </div>
                <!-- 更多教师 -->
            </section>
            <section class="resources">
                <h2>资源下载</h2>
                <ul>
                    <li><a href="#">教学计划</a></li>
                    <li><a href="#">学生手册</a></li>
                </ul>
            </section>
            <section class="social-media">
                <h2>社交媒体</h2>
                <a href="#"><img src="images/social1.png" alt="微博"></a>
                <a href="#"><img src="images/social2.png" alt="微信"></a>
                <a href="#"><img src="images/social3.png" alt="QQ"></a>
            </section>
        </aside>
    </main>

    <!-- 底部 -->
    <footer>
        <div class="footer-content">
            <section class="contact-info">
                <h2>联系方式</h2>
                <p>地址：桂林电子科技大学计算机与信息学院</p>
                <p>电话：123-456-7890</p>
                <p>传真：098-765-4321</p>
                <p>邮箱：info@guet.edu.cn</p>
            </section>
            <nav class="sitemap">
                <h2>网站地图</h2>
                <ul>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">学院概况</a></li>
                    <li><a href="#">师资队伍</a></li>
                    <li><a href="#">科研成果</a></li>
                    <li><a href="#">新闻动态</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </nav>
            <section class="links">
                <h2>友情链接</h2>
                <ul>
                    <li><a href="#">合作单位1</a></li>
                    <li><a href="#">合作单位2</a></li>
                    <!-- 更多友情链接 -->
                </ul>
            </section>
            <section class="copyright">
                <p>© 2024 桂林电子科技大学计算机与信息学院</p>
            </section>
        </div>
    </footer>

    <!-- 可选：引入JavaScript文件 -->
    <script src="scripts/carousel.js"></script>
</body>
</html>